<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>查看图片</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/admin/bootstrap4/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:href="@{/admin/css/basictable.css}">
<script th:src="@{/admin/bootstrap4/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/admin/bootstrap4/js/bootstrap.js}"></script>

<body>
    <div style="width:80%;height: 600px;margin-left:10% ;">
            <a type="button" class="btn btn-outline-info" th:href="@{/admin/courseList(currentIndex=${currentIndex})}">返回</a>
            <br><br>
            <h3>查看图片</h3>

            <img th:src="${url}" style="width: 500px;height: 250px">
            <br><br>
            <a href="#" data-toggle="modal" data-target="#myModal" class="btn btn-success">点击修改图片</a>
    </div>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">修改图片</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div style="margin: 0 auto">
                        <label>图片：</label>
                        <label for="upload">
                            <img id="img" th:src="${url}" width="300" height="180">
                        </label>
                        <span class="text-secondary">点击上传图片</span>
                        <input id="upload" type="file" hidden>
                    </div>
                    <form th:action="@{/admin/modCoursePic}" method="post" id="updateInfo">
                        <input name="courseid" th:value="${courseid}" hidden/>
                        <input name="coursepic" th:value="${url}" id="head" hidden>
                        <input name="currentIndex" th:value="${currentIndex}"  hidden>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="submit" form="updateInfo" class="btn btn-primary">确认修改</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>



</body>
<script>
    $(function () {
        $("#upload").change(function () {
            let form = new FormData();
            form.append("file", $("#upload").prop("files")[0]);
            $.ajax({
                url: "/image/upload",    //后台url
                data: form,
                cache: false,
                async: false,
                type: "POST",          //类型，POST或者GET
                dataType: 'json',       //数据返回类型，可以是xml、json等
                processData: false,
                contentType: false,
                success: function (data) {   //成功，回调函数
                    if (data) {
                        let url = data.url;
                        $("#img").attr("src", url);
                        $("#head").attr("value", url);
                    } else {
                        alert("失败");
                    }
                },
                error: function (er) {     //失败，回调函数
                    alert(JSON.stringify(data));
                }
            });
        });
    });
</script>
</html>
